<template>
  <div class="shop_show">
    <!-- 业态分类 -->
    <div class="toggleFormate">
      <div
        :class="['formate',{'isActive':item.isActive}]"
        v-for="(item,index) in toggleInfo"
        :key="index"
        @click="toggleFormate(item)"
      >
        <span :class="item.icon&&'icon'" :style="{backgroundImage: `url(${item.icon})`}"></span>
        {{item.name}}
      </div>
    </div>
    <div class="brand_info">
      <swiper class="swiper" :options="swiperOption">
        <swiper-slide v-for="(shops,i) in renderBrands" :key="i">
          <div class="shop" v-for="(shop,index) in shops" :key="index">
            <span
              class="shop_logo"
              :style="{backgroundImage: `url(https://openapi.cloudindoormap.com:8085/${shop.Logo})`}"
            ></span>
            <span class="shop_info">
              <p>{{shop.Name}}</p>
              <p>{{shop.floor_name}}</p>
              <div @click="route2map(shop)">
                <span></span>
                如何到达
              </div>
            </span>
          </div>
        </swiper-slide>
        <div class="swiper-scrollbar" slot="scrollbar"></div>
      </swiper>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { groupProjectArray } from "../utils";
export default {
  props: {
    toggleInfo: Array,
    formatType: String,
    type: String
  },
  data() {
    return {
      allShopInfo: [],
      renderBrands: [],
      swiperOption: {
        direction: "vertical",
        slidesPerView: "auto",
        freeMode: true,
        height: 260,
        scrollbar: {
          el: ".swiper-scrollbar"
        },
        mousewheel: true
      }
    };
  },
  computed: {
    ...mapState("home", {
      shopInfo: state => state.shopInfo
    })
  },
  created() {},
  mounted() {
    this.filterAllShop();
  },
  watch: {
    shopInfo(newVal) {
      newVal.length > 0 && this.filterAllShop();
    }
  },
  methods: {
    // 根据购物或美食筛选全部
    filterAllShop() {
      this.toggleInfo.forEach(nav => {
        if (nav.name !== "全部") {
          this.shopInfo.forEach(shop => {
            if (shop.brandTypeName === nav.name) {
              this.allShopInfo.push(shop);
            }
          });
        }
      });
      this.renderBrands = groupProjectArray(this.allShopInfo, 6);
    },
    // 切换业态栏
    toggleFormate(item) {
      if (!item.isActive) {
        this.toggleInfo.forEach(format => {
          format.isActive = false;
          if (format.name === item.name) {
            format.isActive = true;
          }
        });
      }

      this.filterBrands(item.name);
    },
    // 筛选品牌
    filterBrands(name) {
      if (name === "全部") {
        this.renderBrands = groupProjectArray(this.allShopInfo, 6);
        return;
      }
      switch (this.type) {
        case "业态":
          {
            const filterBrands = [];
            this.allShopInfo.forEach(shop => {
              if (shop.brandTypeName.indexOf(name) !== -1) {
                filterBrands.push(shop);
              }
            });
            this.renderBrands = groupProjectArray(filterBrands, 6);
          }
          break;
        case "楼层":
          {
            const filterBrands = [];
            this.allShopInfo.forEach(shop => {
              if (shop.floor_name === name) {
                filterBrands.push(shop);
              }
            });
            this.renderBrands = groupProjectArray(filterBrands, 6);
          }
          break;
      }
    },
    // 跳转地图
    route2map(shop) {
      this.$router.push({
        name: "Map",
        params: {
          nodeId: shop.PointID
        }
      });
    }
  },
  components: {}
};
</script>

<style lang='less'>
.shop_show {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 390px;
  width: 2835px;
  height: 1025px;
  .toggleFormate {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    width: 2700px;
    height: 60px;
    display: flex;
    justify-content: center;
    .formate {
      padding: 15px 40px;
      margin: 0 15px;
      border-radius: 30px;
      border: solid 1px #b78931;
      font-size: 26px;
      line-height: 60px;
      color: #8d6518;
      text-align: center;
      transition: all 0.4s;
      display: flex;
      align-items: center;
      justify-content: center;
      .icon {
        width: 30px;
        height: 30px;
        margin-right: 10px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
      }
      &.isActive {
        background-image: linear-gradient(120deg, #ffd59b 0%, #a87e43 100%);
        color: #ffffff;
      }
    }
  }
  .brand_info {
    position: absolute;
    left: 50%;
    top: 150px;
    transform: translateX(-50%);
    width: 2834px;
    height: 876px;
    .swiper {
      width: 100%;
      height: 100%;
      .swiper-slide {
        width: 100%;
        height: 260px;
        display: flex;
        margin-bottom: 50px;
        align-items: center;
        justify-content: space-around;
        .shop {
          width: 439px;
          height: 260px;
          background-color: #ffffff;
          border-radius: 4px;
          border: solid 1px #d0bba4;
          display: flex;
          align-items: center;
          .shop_logo {
            margin-left: 20px;
            width: 219px;
            height: 218px;
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
            border-radius: 3px;
          }
          .shop_info {
            margin-left: 25px;
            height: 218px;
            flex: 1;
            position: relative;
            p {
              width: 100%;
              height: 26px;
              position: absolute;
              font-size: 20px;
              line-height: 26px;
              color: #8d6518;
              &:nth-child(1) {
                top: 0;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
              }
              &:nth-child(2) {
                top: 40px;
              }
            }
            div {
              position: absolute;
              width: 112px;
              height: 38px;
              border-radius: 30px;
              border: solid 1px #e7c392;
              bottom: 0;
              right: 25px;
              font-size: 13px;
              line-height: 38px;
              color: #d5af65;
              text-align: center;
            }
          }
        }
      }
    }
  }
  .swiper-scrollbar {
    top: 0;
    width: 9px;
    background-color: transparent;
    .swiper-scrollbar-drag {
      background-color: #d5af65;
      opacity: 0.8;
    }
  }
}
</style>
